<template>
  <view class="box_content">
    <view class="title" v-if="item.user">
      <!-- 头像 -->
      <image
        :src="item.user.avatar_url"
        @click.stop="goHome(item.user.user_id)"
      ></image>
      <!-- 名称，发布时间 -->
      <view class="right" v-if="item.user">
        <view class="name">{{ item.user.nick_name }}</view>
        <view class="gangg">{{ item.user.create_time }}</view>
      </view>
    </view>

    <view class="all_detail">
      <!-- 内容 -->
      <view class="box_details" @click="tapDeteil(item)" v-html="item.content">
        <!-- {{ item.content }} -->
      </view>
      <!-- 图片 -->
      <view
        class="jiugong"
        :class="
          item.file.length == 1
            ? 'jiugong1'
            : item.file.length == 4
            ? 'jiugong4'
            : ''
        "
        v-if="item.file.length > 1"
        @click="tapDeteil(item)"
      >
        <view
          class="jiugong_img"
          v-for="(itemValue, index) in item.file"
          :key="index"
          @click.stop="goPreview(itemValue, item.file, index)"
        >
          <!-- 图片展示图 -->
          <image :src="itemValue.url" v-if="itemValue.file_type == 10"></image>
          <!-- 视频展示图 -->
          <image
            :src="itemValue.url_img"
            v-if="itemValue.file_type == 30"
          ></image>
          <!-- 遮罩层 -->
          <view class="jiugong_img_mask" v-if="itemValue.file_type == 30">
            <view class="video_cover_play">
              <image src="@/static/images/icon_dtym_bofang.png"></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 长图 -->
      <view
        class="long_img"
        v-if="item.file.length == 1 && item.file[0].file_type == 10"
      >
        <image
          :src="item.file[0].url"
          mode="widthFix"
          @click.stop="goPreview(item.file[0], 0)"
        ></image>
      </view>

      <!-- 单视频 -->
      <view
        class="single_video"
        v-if="item.file.length == 1 && item.file[0].file_type == 30"
      >
        <image :src="item.file[0].url_img" mode="widthFix"></image>
        <!-- 遮罩层 -->
        <view class="jiugong_img_mask">
          <view class="video_cover_play">
            <image src="@/static/images/icon_dtym_bofang.png"></image>
          </view>
        </view>
      </view>

      <!-- 录音 -->
      <view class="sound" v-if="hasSound">
        <progressBar way="1"></progressBar>
      </view>

      <view
        class="card_content_box_preview"
        v-if="my_level_id < item.grade_auth"
        @click.stop="goMember"
      >
        该内容仅支持{{
          item.grade_auth == 1
            ? "元气驿站"
            : item.grade_auth == 2
            ? "启初梦谷"
            : item.grade_auth == 3
            ? "青空天台"
            : item.grade_auth == 4
            ? "无极云顶"
            : item.grade_auth == 5
            ? "返朴归源"
            : ""
        }}及以上行者查看
      </view>
    </view>

    <!-- 预览样式 -->
    <!-- <view class="Preview_style" v-else @click.stop="goMember">
      该内容仅支持{{
        item.grade_auth == 1
          ? "元气驿站"
          : item.grade_auth == 2
          ? "启初梦谷"
          : item.grade_auth == 3
          ? "青空天台"
          : item.grade_auth == 4
          ? "无极云顶"
          : item.grade_auth == 5
          ? "返朴归源"
          : ""
      }}及以上行者查看
    </view> -->

    <!-- 赞，评论 -->
    <view class="zanPing" @click="tapDeteil(item)">
      <view></view>
      <view class="zan">
        <view class="zanBtn">
          <image
            class="zanImg"
            src="@/static/weichuang/icon_fld_dianzan.png"
          ></image>
          <view class="zanFont" style="margin-right: 43rpx">{{
            item.like_count
          }}</view>
        </view>
        <view class="zanBtn">
          <image
            class="zanImg"
            src="@/static/weichuang/icon_fld_pinglun.png"
          ></image>
          <view class="zanFont">{{ item.comment_count }}</view>
        </view>
      </view>
    </view>

    <!-- 评论框 -->
    <!-- <view>
      <u-input
        class="commentInput"
        type="text"
        placeholder="我也来写一写..."
        border="surround"
        shape="circle"
        color="#ADADAD"
        :fontSize="inputFont"
        v-model="commentValue"
        @change="change"
        placeholderStyle="color:#ADADAD"
        @confirm="confirm"
      >
      </u-input>
    </view> -->
    <!-- 评论内容 -->
    <template v-if="item.comment2 && item.comment2.length">
      <reviewContent
        v-for="(commenItem, commentIndex) in item.comment2"
        :key="commentIndex"
        :value="commenItem"
      />
      <!-- <reviewContent /> -->
    </template>

    
    <u-modal
      :show="show"
      :title="'提示'"
      :content="'您还不是行者身份，无法参与共创若想要参与共创需要开通行者身份！'"
      :showCancelButton="true"
      confirmText="去开通"
      cancelText="取消"
      confirmColor="#55B877"
      @confirm="submit"
      @cancel="show = false"
    ></u-modal>
  </view>
</template>

<script>
import reviewContent from "./reviewContent.vue"; //
export default {
  components: {
    reviewContent,
  },
  props: {
    isComment: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "search",
    },
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    my_level_id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      itemList: [{}, {}],
      src: "",
      commentValue: "",
      inputFont: "30rpx",
      show: false,
      hasSound: 0,
    };
  },
  methods: {
    // 进个人主页
    goHome(user_id) {
      uni.navigateTo({
        url: `/pages/home/home?user_id=${user_id}`,
      });
    },
    // 跳会员页面
    goMember() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
    change() {},
    dianZan() {
      uni.$u.toast("点赞啦！！！");
    },
    pinglun() {
      uni.$u.toast("评论啦！！！");
    },
    confirm() {
      if (this.type == "coCreate") {
        this.show = true;
      }
    },
    submit() {
      uni.navigateTo({
        url: "/pages/member/index",
      });
    },
    goPreview(itemValue, file, index) {
      if (itemValue.file_type == 10) {
        // 图片预览
        // uni.navigateTo({
        //   url: `/components/preview?type=true&img=${itemValue.url}`,
        // });
        let str = [];
        for (let i = 0; i < file.length; i++) {
          if (file[i].file_type == 10) {
            str.push(file[i].url);
          }
        }

        uni.previewImage({
          urls: str,
          current: itemValue.url,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {
              console.log(
                "选中了第" +
                  (data.tapIndex + 1) +
                  "个按钮,第" +
                  (data.index + 1) +
                  "张图片"
              );
            },
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      } else if (itemValue.file_type == 30) {
        // 视频预览
        uni.navigateTo({
          url: `/components/preview?type=false&vimg=${itemValue.url}`,
        });
      }
    },
    tapDeteil(item) {
      if (this.type == "search") {
        // uni.navigateTo({
        //   url: "/pages/detail/detail?id=" + item.id,
        // });
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=fei&currentId=${item.id}&from=yitian`,
        });
      } else if (this.type == "coCreate") {
        uni.navigateTo({
          url: `/pages/detail/coCreateFly?id=${item.id}`,
        });
      } else if (this.type == "wei") {
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=fei&currentId=${item.id}&from=wei`,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box_content {
  width: 100%;
  // background: rgba(39,39,39,0.5);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-top: 40rpx;
  // padding: 0 30rpx;
  box-sizing: border-box;

  .title {
    display: flex;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .right {
      margin-top: 8rpx;
      margin-left: 24rpx;

      .name {
        font-size: 32rpx;
        line-height: 42rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888;
      }

      .gangg {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888;
      }
    }
  }

  .all_detail{
    position: relative;
    min-height: 114rpx;
    .card_content_box_preview {
        color: #eeeeee;
        padding-top: 30rpx;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        background: linear-gradient(
          360deg,
          rgba(48, 53, 77, 1) 70%,
          rgba(49, 57, 79, 0) 100%
        );
        text-align: center;
        width: 100%;
        height: 100%;
      }
  }

  .box_details {
    margin-top: 24rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #444444;
    padding-bottom: 32rpx;
  }

  .jiugong {
    // width: 456rpx;
    margin-top: 32rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    // width: 222rpx;
    // height: 222rpx;
    .jiugong_img {
      width: 222rpx;
      height: 222rpx;
      margin-right: 12rpx;
      margin-bottom: 12rpx;
      position: relative;
      .jiugong_img_mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(1, 1, 1, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        .video_cover_play {
          width: 80rpx;
          height: 80rpx;
          image {
            width: 80rpx;
            height: 80rpx;
          }
        }
      }
    }
    image {
      width: 222rpx;
      height: 222rpx;
    }
    .jiugong_img:nth-child(3n) {
      margin-right: 0;
    }
  }
  .jiugong1 {
    width: 400rpx;
    image {
      width: 400rpx;
    }
  }
  .jiugong4 {
    width: 520rpx;
    .jiugong_img:nth-child(3n) {
      margin-right: 12rpx;
    }
    .jiugong_img:nth-child(2n) {
      margin-right: 0;
    }
  }
  .long_img {
    // max-width: 100%;
    // height: auto;
    margin-top: 32rpx;
    image {
      width: 366rpx;
    }
  }
  .single_video {
    margin-top: 32rpx;
    width: 100%;
    position: relative;
    // video {
    //   width: 100%;
    // }
    .jiugong_img_mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(1, 1, 1, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      .video_cover_play {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
  .sound {
    background: rgba(39, 39, 39, 0.5);
    padding: 47rpx 29rpx;
    border-radius: 16rpx;
    margin-top: 32rpx;
  }
  .Preview_style {
    width: 100%;
    height: 300rpx;
    border-radius: 16rpx;
    background: rgba(105, 113, 151, 0.7);
    margin-top: 24rpx;
    text-align: center;
    line-height: 300rpx;
    color: white;
  }
  .zanPing {
    display: flex;
    width: 100%;
    height: 110rpx;
    justify-content: space-between;

    .zan {
      display: flex;

      .zanBtn {
        display: flex;
        align-items: center;

        .zanImg {
          width: 40rpx;
          height: 40rpx;
        }

        .zanFont {
          margin: 0 10rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          color: #888;
        }
      }
    }
  }

  .commentInput {
    // background-color: rgba(39,44,41,0.5);
    // border-color: rgba(39,44,41,0.1)!important;
    background: #f4f4f4;
    border-color: #f4f4f4 !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
}

.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>